<template>
  <div id="app" style="height: 100%">
    <el-container style="height: 100%">
      <!--  侧边栏    -->
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <!--  菜单栏      -->
        <el-menu @select="handleSelect" router :default-active="activePath">
          <!-- <el-menu-item index="/">首页</el-menu-item> -->
          <!--  1级菜单栏        -->
          <el-submenu
            :index="item.id + ''"
            v-for="item in menulist"
            :key="item.id"
          >
            <template slot="title">
              <span style="font-size: 17px; font-weight: bold">{{
                item.name
              }}</span>
            </template>
            <!--2级菜单栏-->
            <el-menu-item
              :index="subItem.path"
              v-for="subItem in item.childFeature"
              :key="subItem.id"
              :disabled="subItem.disable"
              @click="saveNavState(subItem.path, subItem.id)"
            >
              <template slot="title">
                <span>{{ subItem.name }}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 界面主体 -->
      <el-container style="height: 100%">
        <!-- 头组件   -->
        <el-header
          style="
            height: 55px;
            padding: 5px;
            background-color: rgb(238, 241, 246);
          "
        >
          <div style="padding-left: 20px; float: left">
            <span style="font-size: 30px; font-weight: bold">
              权限管理系统
            </span>
            <span style="margin-left: 15px; font-size: 15px"
              >欢迎 {{ this.username }} ！</span
            >
          </div>
          <div style="padding-right: 20px; float: right">
            <el-button type="info" @click="logout">退出</el-button>
          </div>
        </el-header>

        <!--  主体    -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      //左侧菜单数据
      menulist: [],
      //菜单当前激活状态
      activePath: "",
      activeFeature: "",
      username: "",
    };
  },
  created() {
    this.getMenuList();
    this.activePath = window.sessionStorage.getItem("activePath");
    this.username = window.sessionStorage.getItem("username");
  },
  methods: {
    logout() {
      window.sessionStorage.clear();
      let data = {
        username: window.sessionStorage.getItem("username"),
      };
      axios({
        method: "post",
        url: "/logout",
        data: data,
      }).then(function (rsp) {
        if (rsp.data.code === 0) {
          that.menulist = rsp.data.data;
        }
      });
      this.this.$router.push("/login");
    },

    async getMenuList() {
      let that = this;
      let data = {
        username: window.sessionStorage.getItem("username"),
      };
      axios({
        method: "post",
        url: "/feature/get_menu_list",
        data: data,
      }).then(function (rsp) {
        if (rsp.data.code === 0) {
          that.menulist = rsp.data.data;
        }
      });
    },
    saveNavState(activePath, activeFeature) {
      window.sessionStorage.setItem("activePath", activePath);
      window.sessionStorage.setItem("activeFeature", activeFeature);
      this.activePath = activePath;
      this.activeFeature = activeFeature;
    },
    boolDisable(flag) {
      return flag === 0;
    },
  },
};
</script>
